<template>
	<view class="page">
		<view class="top flex">
			<view class="userCar">
				<view>{{carActive.vehicleModel}}</view>
				<view>{{carActive.licencePlate}}</view>
			</view>
		</view>

		<view class="content flex">
			<view class="icon">
				<view @click="handover(0)" :class="[imgIndex == 0?'active':'']">
					<image :src="carImg"></image>
				</view>
				<view @click="handover(1)" :class="[imgIndex == 1?'active':'']">
					<image :src="InstrumentImg"></image>
				</view>

			</view>

			<view class="startCar">
				<image src="../../static/vehicleControl/startCar.png"></image>
			</view>
		</view>


		<view v-show="imgIndex== 0">
			<u-button v-show="byVehicleStatus.engineCondition == 0" class="start"
				>启动车辆</u-button>
			<u-button v-show="byVehicleStatus.engineCondition == 1" class="start"
				>关闭车辆</u-button>
		</view>

		<view v-show="imgIndex== 1">
			<u-button v-show="byVehicleStatus.safetyLockState == 0" class="start"
				>解锁</u-button>
			<u-button v-show="byVehicleStatus.safetyLockState == 1" class="start"
				>闭锁</u-button>
			<u-button v-show="byVehicleStatus.trunkCondition == 0" class="start"
				>开启后备箱</u-button>
			<u-button v-show="byVehicleStatus.trunkCondition == 1" class="start"
				>关闭后备箱</u-button>
		</view>

		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	
	import { selected, byVehicleId, rechargeStatus } from '@/config/api/car.js'
	
	export default{
		data() {
			return{
				carActive: {},
				
				imgIndex: 0,
				
				carImg: "../../static/vehicleControl/mainWhite.png",
				
				InstrumentImg: "../../static/vehicleControl/Instrument.png",
				
				byVehicleStatus: ''
			}
		},
		methods:{
			getCar() {
				selected().then(res => {
					if(res != ""){
						this.carActive = res
						this.getbyVehicleId(res.id)
					}else{
						this.$refs.uToasts.show({
							message: "请先设置默认车辆！"
						})
						setTimeout(function(){
							uni.switchTab({
								url:"/pages/home/home"
							})
						},3000)
					}
				})
			},
			getbyVehicleId(id) {
				byVehicleId(id).then(res => {
					this.byVehicleStatus = res
				})
			},
			
			handover(index) {
				console.log(index);
				if (index == 0) {
					this.carImg = "../../static/vehicleControl/mainWhite.png"
					this.InstrumentImg = "../../static/vehicleControl/Instrument.png"
				} else {
					this.carImg = "../../static/vehicleControl/main.png"
					this.InstrumentImg = "../../static/vehicleControl/InstrumentWhite.png"
				}
				this.imgIndex = index
			},
			jump(url) {
				uni.switchTab({
					url
				})
			}
			
		},
		onLoad(){
			this.getCar()
		}
	}
	
</script>

<style scoped>
	.page {
		padding: 30rpx 10%;
		position: absolute;
		background-color: #F3F4F6;
		width: 80%;
		height: 100%;
		left: 0;
		right: 0;
	}


	.userCar {
		width: 100%;
		margin: 40rpx 0 0 20%;
	}

	.userCar>view {
		margin-bottom: 20rpx;
		color: #acacad;
	}

	.userCar>view:nth-child(1) {
		font-size: 50rpx;
		color: black;
	}

	.icon {
		margin-top: 80rpx;
	}

	.icon view {
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding: 10rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: white;
		box-shadow: 2px 2px 2px #E2E4E4;
	}

	.icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.content>view:nth-child(2) {
		margin-left: 10%;
	}

	.start {
		background-color: #307FF4;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		font-size: 40rpx;
		font-weight: 700;
		height: 80rpx;
		margin-top: 100rpx;
	}

	.active {
		background-color: #307FF4 !important;
	}
	.startCar image{
		width: 500rpx;
		height: 400rpx;
	}
</style>